<template>
  <div class="container">
    <div class="header">
      <div class="header-left-item">
        <div><img id="user-avatar-img" :src="circleUrl" alt="" /></div>
        <div>
          <h2>{{ userInfo.universityName }}-班级档案录入</h2>
        </div>
      </div>
      <div class="header-right-item">
        <el-button type="primary" round @click="addFile">录入档案</el-button>
      </div>
    </div>
    <div class="my-content">
      <div class="my-content-item">
        <el-form label-position="right" label-width="140px" :model="classInfo">
          <el-form-item label="学院：">
            <el-select
              v-model="classInfo.collegeId"
              filterable
              placeholder="请选择"
              @change="collegeChange"
            >
              <el-option
                v-for="item in collegeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择专业：">
            <el-select
              v-model="classInfo.majorId"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in majorList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择年级：">
            <el-select
              v-model="classInfo.grade"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in gradeList"
                :key="item"
                :label="item + '级'"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级名称：">
            <el-select v-model="classInfo.name" filterable placeholder="请选择">
              <el-option
                v-for="item in nameList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班主任：">
            <el-select
              v-model="classInfo.teacherId"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in teacherList"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {
  downloadAvatar,
  getUserDetails,
  getMajorListByCollegeId,
  getCollegeListByUniversityId,
  getTeacherListByUniversityId,
  addClass,
} from "@/api";
export default {
  data() {
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", //默认头像
      userInfo: {}, //管理员基本信息
      classInfo: {
        collegeId: "",
        majorId: "",
        teahcerId: "",
        name: "",
        grade: "",
      },
      collegeList: [], //学院信息
      majorList: {}, //专业信息
      teacherList: {}, //授课老师
      gradeList: [
        "2019",
        "2020",
        "2022",
        "2023",
        "2024",
        "2025",
        "2026",
        "2027",
        "2028",
        "2029",
        "2030",
      ],
      //班级名称
      nameList: [
        "1班",
        "2班",
        "3班",
        "4班",
        "5班",
        "6班",
        "7班",
        "8班",
        "9班",
        "10班",
        "11班",
        "12班",
        "13班",
        "14班",
        "15班",
        "16班",
        "17班",
        "18班",
        "19班",
        "20班",
      ],
    };
  },
  created() {
    this.downloadManagerAvatar();
    this.initUserInfo();
    // this.initMajorList();
    this.initTeacherList();
    this.initCollegeList();
  },
  methods: {
    //下载用户头像
    async downloadManagerAvatar() {
      let params = {
        avatarUrl: this.$store.state.user.userInfo.avatarUrl,
      };
      let res = await downloadAvatar(params);
      let avatar_img = document.querySelector("#user-avatar-img");
      let imageType = res.type; //获取图片类型
      const blob = new Blob([res], { type: imageType });
      const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
      avatar_img.src = imageUrl;
      avatar_img.onload = function (e) {
        window.URL.revokeObjectURL(avatar_img.src); //释放URL.createObjectURL()创建的对象
      };
    },
    async initUserInfo() {
      let res = await getUserDetails();
      if (res.code !== 0) {
        this.$message.error("获取用户基本信息失败");
        return;
      }
      this.userInfo = res.data;
    },
    // async initMajorList() {
    //   let res = await getMajorListByUniversityId(
    //     this.$store.state.user.userInfo.universityId
    //   );
    //   if (res.code == 0) {
    //     this.majorList = res.data;
    //   } else {
    //     this.$message.error(res.msg);
    //   }
    // },
    async initTeacherList() {
      let res = await getTeacherListByUniversityId(
        this.$store.state.user.userInfo.universityId
      );
      if (res.code == 0) {
        this.teacherList = res.data;
      } else {
        this.$message.error(res.msg);
      }
    },
    async initCollegeList() {
      let res = await getCollegeListByUniversityId(
        this.$store.state.user.userInfo.universityId
      );
      if (res.code == 0) {
        this.collegeList = res.data;
      } else {
        this.$message.error(res.msg);
      }
    },
    async collegeChange(collegeId) {
      let res = await getMajorListByCollegeId(collegeId);
      if (res.code == 0) {
        this.majorList = res.data;
      } else {
        this.majorList = [];
        this.$message.error(res.msg);
      }
    },
    //录入学院档案
    async addFile() {
      let majorId = this.classInfo.majorId;
      let grade = this.classInfo.grade;
      let name = this.classInfo.name;
      if (name.trim() == "" || majorId.trim() == "" || grade.trim() == "") {
        this.$message.warning("学院、专业名称、专业简介不允许为空");
        return;
      }
      // 发送录入档案请求;
      let res = await addClass(this.classInfo);
      if (res.code == 0) {
        this.$message.success("录入档案成功");
        this.clearClassInfo();
      } else {
        this.$message.error(res.msg);
      }
    },
    clearClassInfo() {
      this.classInfo.majorId = "";
      this.classInfo.teacherId = "";
      this.classInfo.grade = "";
      this.classInfo.name = "";
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  background: #f0f2f5;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.header {
  border-radius: 10px 10px 0px 0px;
  display: flex;
  align-items: center;
  width: 70%;
  justify-content: space-between;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid rgb(217, 212, 212);
  .header-left-item {
    padding: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    div {
      margin: 5px;
    }
  }
  .header-right-item {
    padding-right: 70px;
  }
}
.my-content {
  padding-bottom: 30px;
  border-radius: 0px 0px 10px 10px;
  background: rgb(255, 255, 255);
  width: 70%;
  .my-content-item {
    padding-right: 30px;
    padding-top: 20px;
  }
}

#user-avatar-img {
  height: 90px;
  width: 90px;
  border-radius: 50px;
}
</style>